<template>
	<div class="kp-addLinkman">
		<div class='body'>
			<div class='list'>
				<div class='title'>姓名</div>
				<input type="text" placeholder='请输入姓名' v-model="name"></input>
			</div>
			<div class='list'>
				<div class='title active'>姓（拼音）Last name</div>
				<!--<input type="text" placeholder='请输入姓' v-model="latname" @input="eventChange('latname',latname)"></input>-->
				<input type="text" placeholder='请输入姓' v-model="latname"></input>
			</div>
			<div class='list'>
				<div class='title active'>名（拼音）First name</div>
				<input type="text" placeholder='请输入名' v-model="firstname"></input>
			</div>
			<div class='list'>
				<div class='title'>手机号码</div>
				<input type="tel" placeholder='请输入手机号码' v-model="tel" maxlength="11"></input>
			</div>
			<div class='list' v-for="(item,index) in certificateList">
				<div class='title'>{{item.name}}</div>
				<input type="text" placeholder='与证件保持一致' v-model="item.idcard"></input>
			</div>
		</div>
		<div class='box'>
			<div class='list'>
				<div class='title'>乘客性别</div>
				<div class="sex_div">
					<span class="sex_icon" @click="sextab('男')"><em :class="sex=='男'?'active':''"></em>男</span><span class="sex_icon" @click="sextab('女')"><em :class="sex=='女'?'active':''"></em>女</span>
				</div>
			</div>
			<div class='list'>
				<div class='title'>出生日期</div>
				<div class="date_con">
					<datetime v-model="birthday" :min-year="1900"></datetime>
				</div>

			</div>
		</div>
		<div class='add' @click="isFlag= !isFlag">
			<div class='addFont'>
				<img src='../../../assets/jia.png'></img>
			</div>添加证件类型
		</div>

		<div class='save' @click="save">
			保存
		</div>
		<transition name="fade">
			<div class='shade' v-show="isFlag">
				<div class='certificateTypeBox'>
					<div class='certificateType_title'>选择证件类型</div>
					<div class="certificateType_list">
						<div class="certificateType_content" :class="item.flag?'activeColor':''" v-for="(item,index) in certificateTypeList" @click="choose(item)">
							{{item.name}}
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	import { Datetime } from 'vux'
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				isFlag: false, //证件类型
				birthday: '请选择', //生日
				name: '', //名字
				tel: '', //手机号
				latname: '', //姓
				firstname: '', //名
				certificateTypeList: [{
					name: "二代身份证",
					flag: false,
					certType: "1",
					idcard: "",
				}, {
					name: "护照",
					flag: false,
					certType: "2",
					idcard: '',
				}, {
					name: "台湾通行证",
					flag: false,
					certType: "22",
					idcard: '',
				}, {
					name: "外国人永久居留证",
					flag: false,
					certType: "20",
					idcard: '',
				}, {
					name: "台胞证",
					flag: false,
					certType: "8",
					idcard: '',
				}, {
					name: "国际海员证",
					flag: false,
					certType: "11",
					idcard: '',
				}, {
					name: "回乡证",
					flag: false,
					certType: "7",
					idcard: '',
				}, {
					name: "港澳通行证",
					flag: false,
					certType: "10",
					idcard: '',
				}, {
					name: "驾驶证",
					flag: false,
					certType: "6",
					idcard: '',
				}, {
					name: "学生证",
					flag: false,
					certType: "3",
					idcard: '',
				}, {
					name: "军官证",
					flag: false,
					certType: "4",
					idcard: '',
				}, {
					name: "旅行证",
					flag: false,
					certType: "21",
					idcard: '',
				}, {
					name: "户口簿",
					flag: false,
					certType: "25",
					idcard: '',
				}, {
					name: "警官证",
					flag: false,
					certType: "26",
					idcard: '',
				}, {
					name: "临时身份证",
					flag: false,
					certType: "24",
					idcard: '',
				}, {
					name: "士兵证",
					flag: false,
					certType: "23",
					idcard: '',
				}, {
					name: "外国人民居住证",
					flag: false,
					certType: "31",
					idcard: '',
				}, {
					name: "一代身份证",
					flag: false,
					certType: "30",
					idcard: '',
				}, {
					name: "其他",
					flag: false,
					certType: "99",
					idcard: '',
				}], //证件类型
				certificateList: [], //选中的证件类型
				sex: '男', //性别
				isCard: false, //是否有一样的身份证
				cardname: '',
				editinfos: ''
			}
		},
		mounted() {
			if(this.$route.query.peo) {
				switch(String(this.$route.query.peo)) {
					case 'add':
						this.$store.commit('CTITLE', '添加常用联系人');
						break;
					case 'edit':
						this.$store.commit('CTITLE', '编辑常用联系人');
						break;
				}
			}

		},
		methods: {
			//方法放置
			eventChange(type, name) {
				//判断姓名的输入只能输入拼音
				var reg = /^[a-zA-Z]{0,10}$/;
				var flag = reg.test(name);
				if(type == "latname") {
					flag && (this.latname = name) || (this.latname = '');
				} else {
					flag && (this.firstname = name) || (this.firstname = '');
				}

			},
			choose(item) {
				if(!item.flag){
					this.certificateList.push(item);
				}
				//隐藏
				this.isFlag = false;
				//重置状态
				this.certificateTypeList.forEach((item) => {
					this.certificateList.forEach((val) => {
						(val.name == item.name) && (item.flag = true);
					})
				});
			},
			save() {
				let that = this;
				var flag = this.judge();
				if(flag) {
					this.$toast(flag)
				} else {
					this.$loading.show();
					if(String(this.$route.query.peo) == 'add') {
						var sex = (that.sex == "男") ? 0 : 1;
						var arr = [];
						that.certificateList.forEach((item) => {
							var obj = {
								certNo: item.idcard, //证件号
								certType: String(item.certType), //证件类型
							};
							arr.push(obj);
						});
						let param = {
							userID: this.userinfo.userID,
							name: that.name, //姓名
							bornDate: that.birthday, //生日
							mobileNo: that.tel, //电话 
							sexCode: sex.toString(), //性别
							passengerType: "1", //成人
							kpcxcertnO: arr,
							Ename: that.latname + "/" + that.firstname, //英文名字
						};
//						var url = "KPCX/appContacts/saveLocalContacts";
						var url = "kpcx/appContacts/saveLocalContacts";
						that.ajaxlist(url, param);
					}
					if(String(this.$route.query.peo) == 'edit') {
						var sex = (that.sex == "男") ? 0 : 1;
						var arr = [];
						that.certificateList.forEach((item) => {
							var obj = {
								certNo: item.idcard, //证件号
								certType: String(item.certType), //证件类型
							};
							arr.push(obj);
						});
						let param = {
							userID: this.userinfo.userID,
							name: that.name, //姓名
							bornDate: that.birthday, //生日
							mobileNo: that.tel, //电话 
							sexCode: sex.toString(), //性别
							passengerType: "1", //成人
							kpcxcertnO: arr,
							Contactsid: that.editinfos.Contactsid,
							Ename: that.latname + "/" + that.firstname, //英文名字
						};
//						var url = "KPCX/appContacts/updateLocalContacts";
						var url = "kpcx/appContacts/updateLocalContacts";
						that.ajaxlist(url, param);
					}
				}
			},
			ajaxlist(url, param) {
				let that = this;
				this.$http.post(
					this.$baseUrl.baseurl + url,
					param
				).then(function(res) {
					if(res.data.Code == 0) {
						that.$router.go(-1);
						that.$loading.hide();
					} else {
						that.$loading.hide();
						that.$toast(res.data.msg);
					}
				}).catch(error => {
					this.$loading.hide();
				});
			},
			judge() { //判断填写结果
				let that = this;
				var flag = false;
				that.certificateList.forEach((item) => {
					(item.idcard) || (flag = ("请填写" + item.name + "号"));
					//判断身份证正则
					if(item.certType == "1" && item.idcard) {
						let reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
						let flagA = reg.test(item.idcard);
						flagA || (flag = "请填写正确的身份证号");
					};
					if(item.certType == "30" && item.idcard) {
						let reg = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/;
						let flagA = reg.test(item.idcard);
						flagA || (flag = "请填写正确的一代身份证号");
					};
				});
				//判断手机号正则
				if(that.tel) {
					// let pattern = /^((1[3,5,6,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
					let pattern = /^(1)\d{10}$/;
					let telFlag = pattern.test(that.tel);
					// console.log(telFlag);
					telFlag || (flag = "请填写正确的手机号");
				};
				(that.birthday == "请选择") && (flag = "请填写生日");
				(that.tel) || (flag = "请填写手机号");
				(that.firstname) || (flag = "请填写名");
				(that.latname) || (flag = "请填写姓");
				(that.name) || (flag = "请填写姓名");
				return flag
			},
			sextab(sex) {
				this.sex = sex;
			},
			getQuery() {
				if(String(this.$route.query.peo) == "edit") {
					this.editinfos = JSON.parse(this.$route.query.editinfo);
					//获取修改数据
					let that = this;
					if(this.editinfos) {
						var edits = this.editinfos;
						this.name = edits.name;
						this.tel = edits.mobileNo;
						if(edits.kpcxcertnO) {
							var certificateTypeList = that.certificateTypeList;
							edits.kpcxcertnO && edits.kpcxcertnO.forEach((item) => {
								certificateTypeList && certificateTypeList.forEach((ele) => {
									if(item.certType == ele.certType) {
										var val = {
											name: ele.name,
											flag: true,
											certType: ele.certType,
											idcard: item.certNo
										};
										that.certificateList.push(val);

									}
									if(item.certType == '1') {
										edits.bornDate = that.getBirthdayFromIdCard(item.certNo)
									}
								})
							})
						}
						if(edits.Ename) {
							this.latname = edits.Ename.split('/')[0];
							this.firstname = edits.Ename.split('/')[1];
						}

						if(edits.sexCode == '1') {
							this.sex = "女";
						} else if(edits.sexCode == '0') {
							this.sex = "男";
						}
						this.birthday = edits.bornDate;

					}
				}

			},
			getBirthdayFromIdCard(idCard) {
				var birthday = "";
				if(idCard != null && idCard != "") {
					if(idCard.length == 15) {
						birthday = "19" + idCard.substr(6, 6);
					} else if(idCard.length == 18) {
						birthday = idCard.substr(6, 8);
					}

					birthday = birthday.replace(/(.{4})(.{2})(.{2})/, "$1-$2-$3");
				}

				return birthday;
			},
		},
		created() {
			this.getQuery();
		},
		filters: {},
		watch: {
			'$route': 'getQuery'
		},
		components: {
			Datetime,
		},
		computed: {
			...mapGetters([
				'my_tabmess',
				'userinfo'
			]),
		},
	};
</script>

<style scoped>
	.kp-addLinkman {
		background: #F4F5F9;
		padding-top: 90px;
	}
	
	.body {
		margin-top: 20px;
	}
	
	.list {
		display: flex;
		justify-content: space-between;
		padding: 0 28px;
		align-items: center;
		height: 88px;
		font-size: 28px;
		color: #8a8a8a;
		background: #fff;
		border-bottom: 1px solid #F0F0F0;
	}
	
	.title {
		width: 19%;
	}
	
	.list>input {
		width: 65%;
		color: #000;
		border: none;
		outline: none;
	}
	
	.title.active {
		width: 25%;
	}
	
	.box {
		margin-top: 20px;
	}
	
	.add {
		height: 88px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50px 0;
		color: #8a8a8a;
		font-size: 32px;
	}
	
	.addFont {
		width: 36px;
		height: 36px;
		margin-right: 20px;
	}
	
	.addFont>img {
		width: 100%;
		height: 100%;
	}
	/* 遮罩  */
	
	.shade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 5;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.certificateTypeBox {
		margin: 0 auto;
		width: 75%;
		height: 80%;
		background-color: #fff;
		padding: 0 3%;
		border-radius: 10px;
	}
	
	.certificateType_title {
		height: 74px;
		font-size: 30px;
		line-height: 74px;
		text-align: center;
		color: #444;
		border-bottom: 1px solid #D9D9D9;
	}
	
	.certificateType_list {
		height: 90%;
		overflow-y: scroll;
	}
	
	.certificateType_content {
		height: 74px;
		font-size: 30px;
		line-height: 74px;
		text-align: center;
		color: #444;
	}
	
	.certificateType_content.activeColor {
		color: #BCBCBC;
	}
	
	.save {
		height: 74px;
		font-size: 30px;
		line-height: 74px;
		text-align: center;
		color: #fff;
		background: #3BC3C2;
		width: 90%;
		margin: 0 auto;
		border-radius: 10px;
	}
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.sex_div {
		width: 65%;
		line-height: 88px;
	}
	
	.sex_icon {
		margin-right: 20px;
		color: #333;
	}
	
	.sex_icon>em {
		display: inline-block;
		width: 34px;
		height: 34px;
		background-image: url(../../../assets/c.png);
		background-repeat: no-repeat;
		background-size: 34px;
		vertical-align: middle;
		margin-right: 15px;
	}
	
	.sex_icon>em.active {
		background-image: url(../../../assets/xz.png);
	}
	
	.date_con {
		width: 65%;
	}
</style>